<template>
  <!-- 现在的时间 -->
  <div class="container">
    <div class="time-img">
      <img src="/static/image/index_pages/now.png" alt="Now" />
    </div>
    <div class="time">
      {{ time }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const time = ref('');

const addZero = (s) => (s < 10 ? `0${s}` : s);

const getNowTime = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  time.value = `${year}-${addZero(month)}-${addZero(day)} ${addZero(hour)}:${addZero(minute)}:${addZero(second)}`;
};

let timer;

onMounted(() => {
  timer = setInterval(getNowTime, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.container {
  width: 702px;
  height: 84px;
  border: 1px solid #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  background-color: #DAFDE6;
}

.time-img {
  width: 64px;
  height: 112px;
}

.time-img img {
  width: 100%;
  height: 100%;
  margin-top: -10px;
  margin-left: 28px;
}

.time {
  margin-left: 56px;
  color: #02A53C;
  font-size: 30px;
  font-weight: 500;
}
</style>
